import { defineComponent, ref, reactive, computed, ComputedRef } from 'vue';
import Styles from './classList.module.scss';
import { router } from '../../router/index';
import { useClassList } from '@/domain/correction/hooks/classList';
import MyList from './list';
import { StuClass } from '@/domain/correction/types/jobs/classList';
export default defineComponent({
  name: 'ClassList',
  setup() {
    const store = useClassList();
    store.toGetEndedNumber();
    const btnClick = (item: StuClass) => {
      router.push({ path: '/planList', query: { class_id: item.id, course_id: item.course_id }, replace: false });
    };
    const getList = () => {
      store.toGetClasslist();
    };
    const clearList = () => {
      store.toClearlist();
    };
    const changeStatus = (status: 0 | 1) => {
      let s: 2 | 3 = status === 0 ? 2 : 3;
      store.changeStatus(s);
    };
    return () => (
      <div class={Styles['class-box']}>
        <div class={'text-2-5xl h-r4.2 bg-white text-center'} style="line-height: 4.2rem;">
          班级状态
        </div>
        <div class={Styles['list-box']}>
          <MyList
            loading={store.state.loading}
            finished={store.state.finished}
            refreshing={store.state.refreshing}
            getList={getList}
            list={store.state.list}
            btnClick={btnClick}
            clearList={clearList}
            changeStatus={changeStatus}
            statusName={[`进行中（${store.state.ongoing}）`, `已结束（${store.state.ended}）`]}
            btnName="讲次列表"
          ></MyList>
        </div>
      </div>
    );
  }
});
